<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选座</title>
    <link rel="stylesheet" href="../css/select_seat.css">
    <link rel="stylesheet" href="../css/head.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<!-- 头部导航 -->
<div class="header">
    <div class="header-inner">
        <div class="nav">
            <!-- logo -->
            <div class="logo">
                <a href=""><img src="../img/jiejie_logo.png" alt=""></a>
            </div>
            <div>
                <div class="menu-item"><a href="">首页</a></div>
                <div class="menu-item"><a href="">电影</a></div>
                <div class="menu-item"><a href="">影院</a></div>
                <div class="menu-item"><a href="">榜单</a></div>
            </div>

            <div class="search-form">
                <input type="text" class="search-text">
                <a href=""><span class="search-img"></span></a>

            </div>
            <div class="head-user">
                <a href="home_login.html" class="loginBtn">登录</a>
                <a href="home_regist.html" class="loginBtn">注册</a>
            </div>
            <div class="user-info">
                <div class="user-avatar has-login">
                    <img src="https://img.meituan.net/maoyanuser/8b5a75c66ef4efb62fb695631b13419212452.png">
                    <ul class="user-menu yes-login-menu">
                        <li class="text"><a href="">我的订单</a></li>
                        <li class="text login-name" ><a href="javascript:void 0">基本信息</a></li>
                        <li class="text"><a href="javascript:void 0" class="J-logout" data-act="logout-click">退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 避免下面的块上移 -->
<div class="header-m"></div>
<div class="select_seat">

    <!-- 选座头部进度条-->
    <div class="order-bar">
        <div class="order-progress-bar">
            <div class="layui-progress" lay-filter="demo">
                <div class="layui-progress-bar layui-bg-red" lay-percent="50%"></div>
            </div>
        </div>
        <div class="order-progress-text">
            <span>选择影片场次</span>
            <span>选择座位</span>
            <span>14分钟内付款</span>
            <span>影院取票观影</span>
        </div>
    </div>


    <!-- 座位排版 -->
    <div class="hall">
        <div class="seat-example">
            <div class="selectable-example example">
                <span>可选座位</span>
            </div>
            <div class="sold-example example">
                <span>已售座位</span>
            </div>
            <div class="selected-example example">
                <span>已选座位</span>
            </div>
        </div>

        <div class="seats-block">
            <div class="row-id-container">
                <span class="row-id">1</span>
                <span class="row-id">2</span>
                <span class="row-id">3</span>
                <span class="row-id">4</span>
                <span class="row-id">5</span>
                <span class="row-id">6</span>
                <span class="row-id">7</span>
                <span class="row-id">8</span>
                <span class="row-id">9</span>
                <span class="row-id">10</span>
            </div>
            <div class="seats-container">
                <div class="screen-container" style="left: 45px">
                    <div class="screen">银幕中央</div>
                    <div class="c-screen-line"></div>
                </div>
                <div class="seat-wrapper">
                    <div class="row">
                        <!-- <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat empty"></span>
                        <span class="seat empty"></span> -->
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <!-- <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat empty"></span>
                        <span class="seat empty"></span> -->
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <!-- <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat empty"></span>
                        <span class="seat empty"></span> -->
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <!-- <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat empty"></span>
                        <span class="seat empty"></span> -->
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <!-- <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat empty"></span>
                        <span class="seat empty"></span> -->
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <!-- <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat empty"></span>
                        <span class="seat empty"></span> -->
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <!-- <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat empty"></span>
                        <span class="seat empty"></span> -->
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <!-- <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat empty"></span>
                        <span class="seat empty"></span> -->
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <!-- <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat empty"></span>
                        <span class="seat empty"></span> -->
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <!-- <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span> -->
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="side">
        <div class="movie-info clearfix">
            <!-- ::before -->
            <div class="poster">
                <img src="../img/select_seat_yingruyanchen.jpg">
            </div>
            <div class="content">
                <p class="name text-ellipsis">隐入烟尘</p>
                <div class="info-item">
                    <span> 类型：</span>
                    <span class="value">喜剧,科幻</span>
                </div>
                <div class="info-item">
                    <span> 时长：</span>
                    <span class="value">122分钟</span>
                </div>
            </div>
        </div>
        <div class="show-info">
            <div class="info-item">
                <span>影院:</span>
                <span class="value text-ellipsis">杰杰影院111111</span>
            </div>
            <div class="info-item">
                <span>影厅:</span>
                <span class="value text-ellipsis">2号厅</span>
            </div>
            <div class="info-item">
                <span>版本：</span>
                <span class="value text-ellipsis">国语2D</span>
            </div>
            <div class="info-item">
                <span>场次:</span>
                <span class="value text-ellipsis">今天  9月7号 20:00</span>
            </div>
            <div class="info-item">
                <span>票价:</span>
                <span class="value text-ellipsis">￥38/张</span>
            </div>
        </div>
        <div class="ticket-info">
            <div class="no-ticket">
                <p class="buy-limit">座位:一次最多选6个座位</p>
                <p>
                    "请"
                    <span>点击左侧</span>
                    "座位图选择座位"
                </p>
            </div>
            <div class="has-ticket" style="display:none">
                <span class="text">座位:</span>
                <div class="ticket-container" data-limit="6"></div>
            </div>
            <div class="total-price">
                <span>总价:</span>
                <span class="price">
                        "0"
                    </span>
            </div>
        </div>
        <div class="confirm-order">
            <div class="cellphone">
                <span>手机号:</span>
                <span class="phone-num">188****8675</span>
            </div>
            <div class="confirm-btn disable" data-act="confirm-click" data-bid="b_0a0ep6pp">确认选座</div>
        </div>
    </div>
</div>
<script src="../js/select_seat.js"></script>
<!-- 进度条 -->
<script src="../layui/layui.js"></script>
<script>
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use('element', function(){
            var element = layui.element;
        }
    );

</script>
</body>
</html>